
<template>
  <div class="info">
    <MyHead title="个人信息"></MyHead>
    <div class="cell">
      <van-cell-group inset v-if="userInfo">
        <van-cell title="手机号" icon="phone-o" :value="userInfo.phone" />
        <van-cell title="头像" icon="photo-o">
          <template #extra>
            <UploadFile @getfilepath="changeavatar">
              <img
                class="avatar"
                :src="userInfo.avatar.replace(/public/, baseURL)"
                v-if="userInfo.avatar"
                alt=""
              />
              <img class="avatar" :src="pic" v-else alt="" />
            </UploadFile>
          </template>
        </van-cell>
        <van-cell
          title="用户名"
          icon="user-o"
          :value="userInfo.username"
          is-link
          @click="changeInfo('username', '用户名', userInfo.username, null)"
        />
        <van-cell
          title="昵称"
          icon="contact-o"
          :value="userInfo.nickname"
          is-link
          @click="changeInfo('nickname', '昵称', userInfo.nickname, null)"
        />
        <van-cell
          title="性别"
          icon="flower-o"
          :value="userInfo.role | sexFormat"
          is-link
          @click="changeInfo('role', '性别', userInfo.role, null, true)"
        />
        <van-cell
          title="邮箱"
          icon="envelop-o"
          :value="userInfo.email"
          is-link
          @click="changeInfo('email', '邮箱', userInfo.email, reg.email)"
        />
        <van-cell
          title="注册时间"
          icon="underway-o"
          :value="userInfo.time | timeFormat"
        />
        <van-cell
          title="学科"
          icon="comment-o"
          :value="userInfo.subject"
          is-link
          @click="changeInfo('subject', '学科', userInfo.subject, null)"
        />
        <van-cell
          title="班级"
          icon="coupon-o"
          :value="userInfo.class"
          is-link
          @click="changeInfo('class', '班级', userInfo.class, null)"
        />
      </van-cell-group>
      <div class="refresh">
        <van-button @click="getUserInfoAsync" type="warning" block
          >刷新用户信息 <van-icon name="replay" />
        </van-button>
      </div>
    </div>
    <van-dialog
      v-model="show"
      :title="'修改 ' + title"
      :overlay="true"
      :showConfirmButton="false"
    >
      <div class="mask">
        <div class="mbox">
          <div class="form mt10">
            <van-form ref="form">
              <div class="center" v-if="flag">
                <van-radio-group
                  style="padding: 15px"
                  :label="title"
                  v-model="obj[key]"
                  direction="horizontal"
                >
                  <van-radio :name="2">男性</van-radio>
                  <van-radio :name="1">女性</van-radio>
                </van-radio-group>
              </div>
              <van-field
                v-else
                :label="title"
                placeholder="请输入"
                center
                clearable
                v-model="obj[key]"
                :rules="[
                  { required: true, message: '请填写' + title },
                  ...rules,
                ]"
              />
              <div style="margin: 15px">
                <van-button
                  @click="todoupdate"
                  native-type="button"
                  block
                  class="mt10"
                  type="info"
                  >修改</van-button
                >
              </div>
            </van-form>
            <div style="margin: 15px">
              <van-button
                block
                class="mt10"
                type="default"
                @click="show = false"
                >关闭</van-button
              >
            </div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { tochangeuserinfo } from "@/api/api";
export default {
  data() {
    return {
      show: false,
      title: "",
      form: {},
      obj: {},
      key: "",
      rules: [],
      flag: false,
    };
  },
  methods: {
    changeInfo(key, title, value, rules, flag) {
      this.key = key; // 修改 userInfo 里面的字段
      this.title = title;
      this.$set(this.obj, [key], value);
      this.rules = [{ pattern: rules, message: title + "格式错误" }];
      this.flag = flag;
      this.show = true;
      // this.obj.nickname = value
    },
    todoupdate() {
      this.$refs.form
        .validate()
        .then(async (valid) => {
          // 修改
          let res = await tochangeuserinfo(this.obj);
          if (res.code == 200) {
            this.ShowToast("修改" + this.title + "成功");
            this.show = false;
            this.getUesrInfoData({
              ...this.userInfo,
              ...this.obj,
            });
          }
        })
        .catch((err) => {
          this.ShowError("格式错误");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  justify-content: center;
}
.mask {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .mbox {
    width: 330px;
    height: 230px;
    background: #fff;
    border-radius: 10px;
    margin-top: 20px;
  }
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.info {
  width: 100%;
  min-height: 100vh;
  background: #f4f4f4;
  .cell {
    margin-top: 30px;
    ::v-deep .van-cell {
      align-items: center !important;
    }
  }
  .refresh {
    padding: 15px;
  }
}
</style>
